<template>
  <div>
    <heads title="患者详情"></heads>
    <div class="nav">
      <div class="theDoctor">
        <p>身体信息</p>
        <el-input placeholder="患者年龄" class="inp"></el-input>
        <el-input placeholder="性别" class="inp"></el-input>
        <el-input placeholder="身高" class="inp"></el-input>
        <el-input placeholder="体重" class="inp"></el-input>
      </div>
      <div class="theDoctor">
        <p>主诉</p>
        <el-input placeholder="请输入内容"></el-input>
      </div>
      <div class="theDoctor">
        <p>查体</p>
        <el-input placeholder="请输入内容"></el-input>
      </div>
      <div class="theDoctor">
        <p>待解问题</p>
        <el-input placeholder="请输入内容"></el-input>
      </div>
      <div class="complete">
        <button @click="complete">完成</button>
      </div>
    </div>
  </div>
</template>

<script >
import heads from "@/components/heads/heads.vue";
export default {
  name: "details",
  components: { heads },
  data() {
    return {};
  },
  methods: {
    complete() {
      this.$router.push({
        path: "/complete",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.inp {
  border: 0;
}
.nav {
  margin: auto;
  width: 21.25rem;
  height: 36.875rem;
  .theDoctor {
    p {
      margin: 1.25rem 0 1.25rem 0.375rem;
      font-size: 0.9375rem;
      color: #999999;
    }
    input {
      width: 100%;
      border: 0;
      border-bottom: 1px solid #f2f2f2;
      margin-bottom: 1.25rem;
    }
    select {
      width: 100%;
      border: none;
      border-bottom: 1px solid #f2f2f2;
      outline: none;
      margin-left: 6px;
      appearance: none;
    }
  }
}
.complete {
  height: 2.5rem;
  display: flex;
  justify-content: center;
  button {
    width: 8.75rem;
    height: 2.1875rem;
    background: #169bd5;
    border: 0;
    color: #fff;
    margin-top: 1.25rem;
    border-radius: 0.3125rem;
  }
}
</style>